<script setup>
// 功能条数据
import {getCurrentInstance, ref} from "vue";
import src1 from "@/assets/images/miaosha1.png"
import src2 from "@/assets/images/miaosha2.png"
import src3 from "@/assets/images/miaosha3.png"
import src4 from "@/assets/images/miaosha4.png"
import src5 from "@/assets/images/miaosha5.png"
import {GetMallGoods} from "@/api/mall.js";


const {proxy} = getCurrentInstance()

const funcBarList = ref([
  {id: 1, title: "我的订单", icon: "orders-o", badge: ""},
  {id: 2, title: "充值中心", icon: "completed-o", badge: ""},
  {id: 3, title: "购物消息", icon: "comment-o", badge: ""},
  {id: 4, title: "抖音超市", icon: "shop-o", badge: ""},
  {id: 5, title: "小时达", icon: "logistics", badge: ""},
])

const seckillList = ref([
  {id: 1, price: "9.9", icon: src1},
  {id: 2, price: "9.9", icon: src2},
  {id: 3, price: "4.9", icon: src3},
  {id: 4, price: "29.9", icon: src4},
])

const shopList = ref([])

const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const total = ref(0)
const params = ref({
  page: 1,
  pageSize: 10,
})


const onLoad = async () => {
  try {
    const res = await GetMallGoods(params.value)
    if (res.data.records || res.data.records) {
      shopList.value.push(...res.data.records)
      total.value = res.data.total
    }
    if (shopList.value.length >= total.value) {
      finished.value = true;
    }
    loading.value = false
    params.value.page++
  } catch (e) {
    loading.value = false
    finished.value = true
  }
};

const onRefresh = () => {
  // 清空列表数据
  finished.value = false;
  // 重新加载数据
  shopList.value = []
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true;
  params.value.page = 1
  refreshing.value = false;
  onLoad();
};

// 分割小数点前面和小数点后面
const splitDecimal = (value) => {
  if (!value) return
  const strVal = value.toString()
  const start = strVal.slice(0, strVal.lastIndexOf('.'))
  const end = strVal.slice(strVal.lastIndexOf('.'))

  return {
    start,
    end
  }
}

/*
* 跳转大商品详细信息
* */
const showProductInfo = (row) => {
  sessionStorage.setItem("goods-info",JSON.stringify(row))
  proxy.$router.push("/goodsInfo")
}
</script>

<template>
  <div class="bg-[#f6f6f6] mall pt-[60px] px-[10px] text-[#000]">
    <!--搜索框-->
    <div class="flex items-center">
      <div class="search h-[40px] flex-1 px-[10px] flex items-center py-[5px]">
        <van-icon name="search" size="25"/>
        <input class="flex-1 mx-[5px]" placeholder="iphone14 pro max 钢化膜"/>
        <div class="bg-[red] text-[#fff] h-full px-[10px] flex items-center rounded-[8px]">
          搜索
        </div>
      </div>
      <van-icon badge="5" name="cart-o" size="35" class="ml-[10px] mr-[5px]" color="#000"/>
    </div>
    <!--主体内容-->
    <div class="mall-content">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="h-full overflow-auto">
        <van-list
            offset="10"
            v-model:loading="loading"
            :finished="finished"
            :finished-text="shopList.length > 0 ?'已经到底了!': ''"
            @load="onLoad"
        >
          <!--第一列-->
          <div class="funcBar bg-[#fff] py-[15px] rounded-[8px]">
            <div class="flex justify-center items-center flex-col" v-for="item in funcBarList">
              <van-icon :name="item.icon" size="30" :badge="item.badge"/>
              <span class="mt-[10px] text-[#a6a6a6] text-[12px]">{{ item.title }}</span>
            </div>
          </div>
          <!--低价秒杀-->
          <div class="funcBar bg-[#fff] py-[15px] rounded-[8px] mt-[10px]">
            <div class="flex justify-center items-center flex-col pl-[10px]">
              <span class="font-bold mb-[5px]">低价秒杀</span>
              <span class="text-[12px] text-[#a6a6a6]">限时限量</span>
            </div>
            <div class="flex justify-center items-center flex-col" v-for="item in seckillList">
              <van-image :src="item.icon" class="w-[66px] h-[66px]">
                <template v-slot:loading>
                  <van-loading type="spinner" size="20"/>
                </template>
              </van-image>
              <span class="mt-[10px] text-[red] text-[12px]">￥{{ item.price }}</span>
            </div>
          </div>
          <!--商品展示-->
          <div class="shops mt-[10px]">
            <div v-for="item in shopList" class="bg-[#fff] rounded-[10px] overflow-hidden"
                 @click="showProductInfo(item)">
              <van-image :src="item.goodsCover" class="w-full h-[150px]">
                <template v-slot:loading>
                  <van-loading type="spinner" size="20"/>
                </template>
              </van-image>
              <!--商品描述-->
              <div class="p-[5px]">
                <div class="flex">
                  <div class="bg-[red] px-[5px] mr-[5px] text-[#fff] text-[12px] rounded-[5px] pt-[1px]"
                       v-if="item.overBalance">超值购
                  </div>
                  <div class="flex-1">{{ item.title }}</div>
                </div>
                <div class="flex my-[5px]">
                  <span class="text-[red] mr-[5px]" v-if="item.maxOut">
                    满 {{ item.maxOutPrice }} 减 {{ item.maxOutSubtract }}</span>
                  <span class="text-[#cfb89f]" v-if="item.collectSize">超百人收藏</span>
                </div>
                <div class="flex items-center">
                  <div class="mr-[8px] text-[red]" v-if="item.overBalance">
                    <span class="text-[20px]">{{ splitDecimal(item.overBalancePrice)?.start }}</span>
                    <span>{{ splitDecimal(item.overBalancePrice)?.end }} 超值价</span>
                  </div>
                  <div class="mr-[8px] text-[red]" v-else>
                    <span class="text-[20px]">{{ splitDecimal(item.price)?.start }}</span>
                    <span>{{ splitDecimal(item.price)?.end }} 尊享价</span>
                  </div>
                  <div class="flex-1 text-[#c9c9c9] pt-[3px]">已售 {{ item.sales }} 件</div>
                </div>
              </div>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<style scoped lang="scss">
.mall {
  height: calc(100vh - 60px);
}

.search {
  border: 2px solid red;
  border-radius: 15px;
}

.mall-content {
  height: calc(100vh - 180px);
  margin-top: 10px;
}

.funcBar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.shops {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
</style>
